import React, {
  forwardRef,
  useEffect,
  useImperativeHandle,
  useMemo,
  useRef,
  useState,
} from 'react';

import type { FowardRefYearRange } from '@/pages/InventoryAnalysis/components/search/YearRange';
import YearRange from '@/pages/InventoryAnalysis/components/search/YearRange';
import { DatePicker, InputNumber, Tooltip } from 'antd';
import { useModel } from 'umi';
import './_style.less';
import BusinessTypeModal from './BusinessTypeModal';
import { Button } from 'devextreme-react';
import { SettingOutlined } from '@ant-design/icons';

const { RangePicker } = DatePicker;

const dateFormat = 'YYYY';

export interface SearchRenderAProps {
  yearDate: string[] | null; //2024
  ranking?: number | null; //排名
  showRanking?: boolean;
  formDisabled?: boolean; //表单状态
  dbname?: string;
  setUserTypeCallback?: any
}

export interface IFormSearchValues {
  startYear?: string;
  endYear?: string;
  dates?: string[];
  ranking: number | null;
}

export interface FowardSearchRenderA {
  getFormSearchValues: () => IFormSearchValues;
}

const SearchRenderA = forwardRef(
  (props: SearchRenderAProps, ref: React.ForwardedRef<FowardSearchRenderA>) => {
    const {
      yearDate: propsYearDate,
      ranking: propsRanking,
      showRanking = true,
      formDisabled = false,
      dbname,
      setUserTypeCallback
    } = props;

    // const yearDateModel: any = useModel('qjModel');
    const ztModel = useModel('ztModel');

    const { ztDates } = ztModel;

    const yearRangeRef = useRef<FowardRefYearRange | null>(null);

    const inputRef = useRef<any>();
    const [rakingValue, setRakingValue] = useState<number | null>(null);
    const businessTypeModal = useRef<any>(null);

    const defaultYearDateValue = useMemo(() => {
      if (propsYearDate !== null && propsYearDate !== undefined) {
        return propsYearDate;
      } else if (ztDates) {
        return ztDates;
      } else {
        return [];
      }
    }, [propsYearDate, ztDates]);

    const startYearDate = defaultYearDateValue?.length === 0 ? '' : defaultYearDateValue[0];
    const endYearDate =
      defaultYearDateValue?.length === 0
        ? ''
        : defaultYearDateValue[defaultYearDateValue.length - 1];

    useEffect(() => {
      if (propsRanking !== undefined) {
        setRakingValue(propsRanking);
      }
    }, [propsRanking]);

    useImperativeHandle(
      ref,
      () => {
        return {
          getFormSearchValues: () => {
            const selectYearDate: any = yearRangeRef.current?.getYearDateValue() || [''];
            if (showRanking) {
              return {
                ...selectYearDate,
                ranking: rakingValue,
              };
            } else {
              return {
                yearDate: selectYearDate,
              };
            }
          },
        };
      },
      [rakingValue, showRanking],
    );

    function handleRakingChange(value: number | null) {
      setRakingValue(value);
    }

    return (
      <>
        <div className={'custom-search-panel'} style={{ display: 'flex' }}>
          <div style={{ paddingRight: 0 }}>
            {/*<span style={{ marginRight: 3, marginLeft: 2 }}>年度：</span>*/}
            <YearRange
              startDate={startYearDate}
              endDate={endYearDate}
              ref={yearRangeRef}
              disabled={formDisabled}
            />
          </div>
          {showRanking ? (
            <div>
              <span style={{ paddingRight: 10, paddingLeft: 1 }}>前</span>
              <InputNumber
                style={{ width: 80, marginRight: 5 }}
                min={1}
                value={rakingValue}
                onChange={handleRakingChange}
                disabled={formDisabled}
              />
              <span>名</span>
            </div>
          ) : null}
          {showRanking ? (
            <Tooltip
              title={"标准业务类型设置"}
              placement="bottom"
            >
              <SettingOutlined
                color="#4f2d7f"
                style={{ marginRight:10, display: "flex", alignItems: "center", fontSize: 17 }}
                onClick={() => businessTypeModal.current.show() } />
          </Tooltip>
          ) : null}
        </div>
        {showRanking ? (
          <BusinessTypeModal dbname={dbname} ref={businessTypeModal} okCallback={setUserTypeCallback} />
        ) : null}
      </>
    );
  },
);

export default SearchRenderA;
